<template>
	<navigatorComp title="祠堂简介" bgcColor="#121512" fontColor="#fff"></navigatorComp>
	<view class="brief_content">
		<view class="content_box">
			<view class="citang">
				<view class="left">
					<image :src="imgUrl + 'imgs/home/temple_img.png'" mode=""></image>
				</view>
				<view class="right">
					<view class="top">
						<view>{{ dataObj.hallName }}</view>
						<view>家族祖籍:{{ dataObj.homeAddr }}</view>
					</view>
					<view class="bottom">
						<view class="LEFT">
							<view>{{ dataObj.lingweiNumber }}</view>
							<view>供奉灵位</view>
						</view>
						<view class="line"></view>
						<view class="RIGHT">
							<view>{{ dataObj.candleNumber }}</view>
							<view>供奉次数</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content_box" v-if="dataObj.summarized">
			<view class="flex">
				<view class="top_txt">祠记</view>
				<view class="more"></view>
			</view>
			<view class="bottom_txt">
				{{ dataObj.summarized }}
			</view>
		</view>
		<view class="content_box">
			<view class="flex">
				<view class="top_txt">祠堂族员</view>
				<view
					class="more"
					@click="
						goUrl(
							'/subPages/home/ancestralTemple/friendGroup?dataObj=' +
								JSON.stringify(dataObj)
						)
					"
				>
					{{ dataObj.memberNumber }}人
					<up-icon bold name="arrow-right" color="#333333" size="28rpx"></up-icon>
				</view>
			</view>
			<view class="invite_list">
				<view class="upload_">
					<view class="upload_list_" v-for="(item, index) in dataObj.peopleList">
						<image class="upload_img_" :src="item.headUrl" mode=""></image>
					</view>
				</view>
				<!-- @click="goUrl('/subPages/home/ancestralTemple/friendGroup?dataObj='+JSON.stringify(dataObj))" -->
				<view class="invite" @click="openInviteCodePopup">
					<image
						class="upload_img_"
						src="http://112.124.50.179:8888/imgs/home/yq.png"
						mode=""
					></image>
				</view>
			</view>
		</view>
		<view class="content_box">
			<view class="flex">
				<view class="top_txt">回忆相册</view>
				<view
					class="more"
					@click="
						goUrl(
							'/subPages/home/ancestralTemple/ancestralTempleAlbum?isSelf=' +
								JSON.stringify(dataObj.isSelf)
						)
					"
				>
					{{ dataObj.isSelf ? '编辑' : dataObj.photoList?.length > 0 ? '更多' : '' }}
					<up-icon
						v-if="dataObj.isSelf || dataObj.photoList?.length > 0"
						bold
						name="arrow-right"
						color="#333333"
						size="28rpx"
					></up-icon>
				</view>
			</view>
			<view class="upload" v-if="dataObj.photoList && dataObj.photoList.length">
				<view class="upload_list" v-for="(item, index) in dataObj.photoList">
					<image class="upload_img" :src="item.imageUrl[0]" mode=""></image>
				</view>
			</view>
			<view class="no_content" v-else>
				<image src="http://112.124.50.179:8888/imgs/home/111.png" mode=""></image>
				<view v-if="dataObj.isSelf">
					上传照片，
					<br />
					让我们一起重温那些难忘的瞬间
				</view>
				<view v-else>尚未填写回忆相册</view>
				<up-button
					color="#F3E0BB"
					shape="circle"
					:text="'去上传'"
					v-if="dataObj.isSelf"
					@click="
						goUrl(
							'/subPages/home/ancestralTemple/ancestralTempleAlbum?isSelf=' +
								JSON.stringify(dataObj.isSelf)
						)
					"
				></up-button>
			</view>
		</view>
		<view class="content_box">
			<view class="flex">
				<view class="top_txt">纪念视频</view>
				<view
					class="more"
					@click="
						goUrl(
							'/subPages/home/ancestralTemple/ancestralTempleVideo?isSelf=' +
								JSON.stringify(dataObj.isSelf)
						)
					"
				>
					{{ dataObj.isSelf ? '编辑' : dataObj.videoList?.length > 0 ? '更多' : '' }}
					<up-icon
						v-if="dataObj.isSelf || dataObj.photoList?.length > 0"
						bold
						name="arrow-right"
						color="#333333"
						size="28rpx"
					></up-icon>
				</view>
			</view>
			<view class="videoList" v-if="dataObj.videoList && dataObj.videoList.length">
				<!-- 		<video :poster="item.videoUrl[0].cover" v-for="(item, index) in dataObj.videoList" object-fit="cover"
					:controls="false" :show-center-play-btn="false" :src="item.videoUrl[0].fileUrl"
					@click.stop="previewVideo(index)">
					<cover-view>
						<view class="videoItem"></view>
						<image class="stop" src="http://112.124.50.179:8888/imgs/home/videoStop.png" mode="widthFix"></image>
					</cover-view>
				</video> -->
				<videoPreview
					:listMR="'-30rpx'"
					:mr="'24rpx'"
					:width="'192rpx'"
					:height="'192rpx'"
					:videoList="videoList"
				></videoPreview>
			</view>
			<view class="no_content" v-else>
				<image src="http://112.124.50.179:8888/imgs/home/111.png" mode=""></image>
				<view v-if="dataObj.isSelf">
					分享影像资料，
					<br />
					让这份记忆永不褪色
				</view>
				<view v-else>尚未填写纪念视频</view>
				<up-button
					color="#F3E0BB"
					shape="circle"
					:text="'去上传'"
					v-if="dataObj.isSelf"
					@click="
						goUrl(
							'/subPages/home/ancestralTemple/ancestralTempleVideo?isSelf=' +
								JSON.stringify(dataObj.isSelf)
						)
					"
				></up-button>
			</view>
		</view>

		<view class="content_box">
			<view class="flex">
				<view class="top_txt">传记</view>
				<view class="more" @click="goUrl('/subPages/home/ancestralTemple/memoir')">
					更多
					<up-icon bold name="arrow-right" color="#333333" size="28rpx"></up-icon>
				</view>
			</view>
			<view class="" v-if="dataObj.lifeList && dataObj.lifeList.length">
				<view class="memoirList">
					<view class="memoirItem" v-for="(item, index) in dataObj.lifeList">
						<view class="memoirItem_title_box">
							<view class="memoirItem_title singleLineOverflowHidden">
								{{ item.subject }}
							</view>
						</view>
						<view class="memoirItem_content">
							<view
								class="ccc"
								:style="{ marginBottom: item.content.length <= 62 ? '16rpx' : '0' }"
							>
								{{ item.isShort ? content_short(item.content) : item.content }}
							</view>
							<view
								class="memoirItem_content_expand"
								@click="expand(item)"
								v-if="item.content.length >= 62"
							>
								{{ item.isShort ? '展开' : '收起' }}
							</view>
						</view>
						<view class="upload" v-if="item.imageUrl.length > 0">
							<view class="upload_list" v-for="(i, key) in item.imageUrl">
								<image class="upload_img" :src="i" mode=""></image>
							</view>
						</view>
						<view class="nickName">
							<text>{{ item.nickName }}</text>
							<text>{{ item.createdAt }}</text>
						</view>
						<view class="line" v-if="index != dataObj.lifeList.length - 1"></view>
					</view>
				</view>
			</view>
			<view class="no_content" v-else>
				<image src="http://112.124.50.179:8888/imgs/home/111.png" mode=""></image>
				<view>
					分享您所知道的点滴，
					<br />
					让我们一起共同记住那些珍贵的回忆
				</view>
				<up-button
					color="#F3E0BB"
					shape="circle"
					:text="'去添加'"
					@click="goUrl('/subPages/home/ancestralTemple/memoir')"
				></up-button>
			</view>
		</view>

		<!-- <view class="content_box">
			<view class="flex">
				<view class="top_txt">祠堂位置</view>
				<view v-if="dataObj.isSelf" class="more"
					@click="goUrl('/subPages/home/ancestralTemple/position?dataObj='+JSON.stringify(dataObj))">
					编辑
					<up-icon bold name="arrow-right" color="#333333" size="28rpx"></up-icon>
				</view>
			</view>
			<view v-if="dataObj.hallPosAddress">
				<view class="bottom_txt">
					墓园地址:{{dataObj.hallPosAddress}}
				</view>
				<view class="bottom_txt">
					具体位置:{{dataObj.hallPosLocation}}
				</view>
				<view class="upload">
					<view class="upload_list" v-for="item,index in dataObj.hallPosImages" :key="index">
						<image class="upload_img" :src="item" mode=""></image>
					</view>
				</view>
			</view>
			<view class="no_content" v-else>
				<image src="http://112.124.50.179:8888/imgs/home/222.png" mode=""></image>
				<view v-if="dataObj.isSelf">记录安息之所，
					<br />让思念有寄托之处
				</view>
				<view v-else>尚未填写地址</view>
				<up-button color="#F3E0BB" shape="circle" :text="'去编辑'" v-if="dataObj.isSelf"
					@click="goUrl('/subPages/home/ancestralTemple/position?dataObj='+JSON.stringify(dataObj))"></up-button>
			</view>
		</view> -->
	</view>
	<InviteCodePopup ref="InviteCodePopupRef" :text="'祠堂'" type="hall" @query="query" />
	<!-- 	<up-overlay :show="showOverlay" :mask-click-able="false">
		<image @click="showOverlay = false" class="overlay_close" src="http://112.124.50.179:8888/imgs/tagClose.png"></image>
		<video class="overlay_video" :src="currentVideo"></video>
	</up-overlay> -->
</template>

<script setup>
import { imgUrl } from '@/external/utils/imgUrl';
import videoPreview from '/components/upload/videoPreview.vue';
import navigatorComp from '/components/navigator/index.vue';
import InviteCodePopup from '@/components/inviteCodePopup/index.vue';
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import HomeApi from '@/API/home/index.js';
import { timeFormat } from '@/node_modules/uview-plus';
const homeApi = new HomeApi();

const videoList = ref([]);
const showOverlay = ref(false);
const currentVideo = ref('');
const dataObj = ref({});
const InviteCodePopupRef = ref();

onShow(() => {
	if (uni.getStorageSync('hallId')) {
		query();
	}
});
const previewVideo = (index) => {
	console.log('lll');
	showOverlay.value = true;
	currentVideo.value = dataObj.value.videoList[index].videoUrl[0].fileUrl;
};

// function isLeapYear(year) {
// 	return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
// }

function diffDates(dateString1, dateString2) {
	const date1 = new Date(dateString1);
	const date2 = new Date(dateString2);
	let yearsDiff = 0;
	let tempDate = date1;

	// 计算完整的年份差异
	while (tempDate.getFullYear() < date2.getFullYear()) {
		tempDate.setFullYear(tempDate.getFullYear() + 1);
		yearsDiff++;
	}

	// 如果年份调整后日期超过了 date2，则回退一年并重新计算
	if (tempDate > date2) {
		yearsDiff--;
		tempDate.setFullYear(tempDate.getFullYear() - 1);
	}

	// 计算剩余的天数差异
	const diffInMilliseconds = date2 - tempDate;
	const diffInDays = Math.ceil(diffInMilliseconds / (1000 * 3600 * 24));

	return {
		years: yearsDiff,
		days: diffInDays
	};
}

const expand = (item) => {
	item.isShort = !item.isShort;
};
const content_short = (content) => {
	return content.substring(0, 62) + '...';
};
const query = () => {
	homeApi
		.getHallBaseInfoApi({
			hallId: uni.getStorageSync('hallId')
		})
		.then((res) => {
			dataObj.value = res.data;
			if (dataObj.value.photoList) {
				dataObj.value.photoList.forEach((ele) => {
					ele.imageUrl = JSON.parse(ele.imageUrl);
				});
			}
			if (dataObj.value.videoList) {
				let arr = [];
				dataObj.value.videoList.forEach((ele) => {
					ele.videoUrl = JSON.parse(ele.videoUrl);
					ele.videoUrl.forEach((item) => {
						arr.push({
							videoId: ele.videoId,
							fileUrl: item.fileUrl,
							cover: item.cover
						});
					});
				});
				videoList.value = arr;
			} else {
				videoList.value = [];
			}
			if (dataObj.value.lifeList) {
				dataObj.value.lifeList.forEach((ele) => {
					ele.isShort = false;
					ele.imageUrl = ele.imageUrl.split(',').filter((item) => item !== '');
				});
			}
			if (dataObj.value.hallPosImages) {
				dataObj.value.hallPosImages = JSON.parse(dataObj.value.hallPosImages);
			}
			if (dataObj.value.peopleList) {
				dataObj.value.peopleList.forEach((ele) => {
					ele.diff = diffDates(
						ele.deathTime,
						timeFormat(new Date().getTime(), 'yyyy-mm-dd')
					);
					ele.con = `离世${ele.diff.years}年${ele.diff.days}天`;
				});
			}
			if (uni.getStorageSync('userInfo').userId == dataObj.value.creatorUserId) {
				dataObj.value.isSelf = true;
			} else {
				dataObj.value.isSelf = false;
			}
			console.log(dataObj.value);
		});
};
const openInviteCodePopup = () => {
	InviteCodePopupRef.value.inviteCodePopup.show = true;
};
const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};
</script>

<style lang="scss">
page {
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	background-color: #1e201f;
	overflow: auto;
}

.no_content {
	margin-top: 32rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	image {
		width: 96rpx;
		height: 96rpx;
	}

	view {
		font-size: 24rpx;
		color: #666666;
		text-align: center;
		line-height: 40rpx;
		margin-top: 24rpx;
	}
}

.u-button {
	height: 60rpx !important;
	width: 180rpx !important;
	margin-top: 24rpx;
}

::v-deep.u-button__text {
	color: #524630 !important;
}

.brief_content {
	overflow: visible;
	height: auto;
	padding: 0 32rpx env(safe-area-inset-bottom);
	margin-bottom: 32rpx;

	.top_txt {
		font-size: 32rpx;
		color: #0e0e0e;
		position: relative;
		font-weight: Regulabr;
	}

	.top_txt::before {
		content: '';
		display: block;
		position: absolute;
		bottom: 2rpx;
		width: 72rpx;
		height: 8rpx;
		background: #999999;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 0.8;
	}

	.content_box {
		margin-top: 32rpx;
		background: url('http://112.124.50.179:8888/imgs/home/b2.png') no-repeat;
		// background-size: 100% 100%;
		// min-height: 342rpx;
		background-color: #ebebeb;
		box-sizing: border-box;
		padding: 32rpx;
		border-radius: 8rpx;

		.citang {
			display: flex;
			align-items: center;

			.left {
				width: 162rpx;
				height: 216rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				margin-left: 32rpx;

				.top {
					view:nth-child(1) {
						margin-bottom: 16rpx;
						font-size: 32rpx;
					}

					view:nth-child(2) {
						margin-bottom: 34rpx;
					}
				}

				.bottom {
					display: flex;
					align-items: center;

					.line {
						height: 40rpx;
						border-left: 1px solid #c5c5c5;
						margin: 0 50rpx;
					}

					.LEFT,
					.RIGHT {
						view:nth-child(1) {
							margin-bottom: 4rpx;
							text-align: center;
							font-size: 32rpx;
						}

						// display: flex;
					}
				}
			}
		}

		.bottom_txt {
			padding-top: 24rpx;
			display: flex;
			font-size: 28rpx;
		}

		.more {
			font-size: 28rpx;
			color: #333333;
			display: flex;
			align-items: center;
		}

		.invite_list {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.upload_ {
				display: flex;
				flex-wrap: wrap;
				margin-right: -30rpx;
				margin-top: 24rpx;

				.upload_list_ {
					width: 120rpx;
					margin-right: 24rpx;
					height: 120rpx;
					position: relative;
					margin-bottom: 16rpx;

					.upload_img_ {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}
				}
			}

			.invite {
				width: 120rpx;
				height: 120rpx;

				image {
					border-radius: 12rpx;
					width: 100%;
					height: 100%;
				}
			}
		}

		.upload {
			margin-right: -30rpx;
			margin-top: 24rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-column-gap: 22rpx;
			grid-row-gap: 22rpx;
			width: 100%;

			.upload_list {
				width: 100%;
				height: 190rpx;

				.upload_img {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}
		}

		.videoList {
			display: flex;
			flex-wrap: wrap;
			margin-top: 24rpx;
			margin-right: -30rpx;

			video {
				width: 192rpx;
				margin-right: 24rpx;
				height: 192rpx;
				position: relative;
				margin-bottom: 16rpx;
				overflow: hidden;
			}

			.videoItem {
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}

			.stop {
				position: absolute;
				width: 56rpx;
				height: 56rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.memoirList {
			box-sizing: border-box;
			margin-top: 40rpx;

			.line {
				border-bottom: 1px solid #c5c5c5;
				margin-top: 32rpx;
			}

			.ccc {
				word-wrap: break-word;
				/* 或者使用 overflow-wrap: break-word; */
				white-space: pre-wrap;
				/* 或者使用 white-space: normal; */
			}

			.memoirItem {
				width: 100%;
				box-sizing: border-box;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-bottom: 24rpx;
			}

			.memoirItem_title_box {
				width: 100%;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.memoirItem_title {
					font-weight: 400;
					font-size: 32rpx;

					color: #0e0e0e;
					line-height: 38rpx;
					margin-right: 70rpx;
					-webkit-line-clamp: 2;
					margin-bottom: 16rpx;
				}

				image {
					margin-top: -8rpx;
					margin-right: -8rpx;
					width: 48rpx;
					height: 48rpx;
					flex-shrink: 0;
				}
			}

			.memoirItem_content {
				width: 100%;
				font-weight: 400;
				font-size: 28rpx;

				color: #0e0e0e;
				line-height: 42rpx;
				text-align: justify;

				.memoirItem_content_expand {
					float: right;
					text-align: right;
					width: 100%;
					font-size: 28rpx;
					color: #8e775b;
					line-height: 42rpx;
					display: inline;
				}
			}

			.nickName {
				color: #666666;
				font-size: 24rpx;
				margin-top: 16rpx;

				text {
					padding-right: 24rpx;
				}
			}
		}
	}
}

.flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.overlay_video {
	width: 100%;
	height: 100%;
}

.overlay_close {
	position: absolute;
	width: 64rpx;
	height: 64rpx;
	/*  #ifdef  APP-PLUS || MP-WEIXIN  */
	top: var(--status-bar-height);
	/* #endif */
	/*  #ifdef  H5  */
	top: 100rpx;
	/* #endif */
	left: 32rpx;
	z-index: 999999;
}
</style>
